<template>
	<zw-dialog :hidden="hidden" title="修改密码" :width="450" :height="320" :showHeaderBg="false" :hideFooter="false"
	 :showFooterBg="false" borderRadius @close="closeDialog" @cancel="closeDialog" @confirm="submit">
		<view class="form-wrap" @keydown.enter="submit">
			<view class="form-item-title">原密码</view>
			<view class="form-item">
				<input placeholder="输入原密码" password v-model="oldPassword" />
			</view>
			<view class="form-item-title">新密码</view>
			<view class="form-item">
				<input placeholder="输入新密码" password v-model="newPassword" />
			</view>
			<view class="form-item">
				<input placeholder="重复新密码" password v-model="repeatPassword" />
			</view>
			<view class="form-item-title">验证码</view>
			<view class="form-item">
				<input placeholder="图片验证码" maxlength="4" v-model="captcha" />
				<image class="captcha" :src="`${$util.baseUrl}/security/captcha?key=${random}`" title="点击刷新" @click="getRandom"></image>
			</view>
		</view>
	</zw-dialog>
</template>

<script>
	export default {
		props: {
			hidden: true
		},
		data() {
			return {
				oldPassword: '',
				newPassword: '',
				repeatPassword: '',
				captcha: '',
				random: ''
			}
		},
		created() {
			this.getRandom();
		},
		methods: {
			getRandom() {
				this.random = this.$util.getUUID();
			},
			closeDialog() {
				this.$emit('update:hidden', true);
			},
			submit() {
				if (!this.checkForm()) return;

				uni.showLoading({
					title: '处理中...',
					mask: true
				});

				this.$util.request('/security/updatePwd', {
					oldPwd: this.oldPassword,
					newPwd: this.newPassword,
					captcha: this.captcha,
					key: this.random
				}, (res) => {
					uni.hideLoading();

					if (res.state == 'ok') {
						this.$store.commit('logout');

						this.$alert('密码修改成功！', {
							cancelText: '返回首页',
							confirmText: '重新登录'
						}, () => {
							this.closeDialog();
							uni.navigateTo({
								url: '/pages/user/login/index'
							});
						}, () => {
							this.closeDialog();
							uni.navigateTo({
								url: '/pages/index'
							});
						});
					} else {
						this.$util.showErrorMsg(res.msg);
						this.getRandom();
						this.captcha = '';
					}
				});
			},
			checkForm() {
				if (!this.$regular.password.test(this.oldPassword)) {
					return this.$util.showErrorMsg('原密码错误');
				}
				if (!this.$regular.password.test(this.newPassword)) {
					return this.$util.showErrorMsg('新密码格式错误');
				}
				if (this.repeatPassword != this.newPassword) {
					return this.$util.showErrorMsg('新密码输入不一致');
				}
				if (this.captcha.length != 4) {
					return this.$util.showErrorMsg('验证码错误');
				}

				return true;
			}
		}
	}
</script>

<style lang="scss">
	.form-wrap {
		width: 100%;
		margin: 0 20px;
		padding: 30px 40px 0;
		border-top: 1px solid $border-color;

		.form-item-title {
			font-size: 15px;
			color: #555;
			font-weight: bold;
			line-height: 30px;
		}

		.form-item {
			@extend %flex-align-center;
			margin-bottom: 10px;

			input {
				flex: 1;
				height: 40px;
				line-height: 40px;
				padding: 0 10px;
				color: #333;
				border: 1px solid #e8e8e8;
			}

			.captcha {
				width: 125px;
				height: 42px;
				margin-left: 15px;
				cursor: pointer;
			}
		}
	}
</style>
